<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的购物车</title>
    <style>
        #box-list {
            width: 200px;
            height: 350px;
            border: 1px solid #0f0;
            margin: 10px;
            float: left;

        }

        img {
            width: 140px;
            height: 140px
        }

        .ipt {
            width: 30px;
            height: 15px;
        }

        .ocheack {
            float: left;
        }
    </style>
    <script src="../lb/axios.min.js"></script>
    <script src="../config/config.js"></script>
    <script src="../html/jquery-1.11.3.js"></script>
</head>

<body>

    <div>
        <span>全选</span>
        <input id="all-selete" type="checkbox">
        <span>总金额：</span>
        <strong class="count-price" style="font-size:18px"></strong>

    </div>
    <div id="box">

        <!-- <img src="../img/11.jpg" alt="商品的图片"> 
                 <p>商品的详情</p>
                 单价:<span>33</span>
                 <span>数量</span><input type="button" value="-">
                 <input class="ipt" type="text" value="1">
                 <input  type="button" value="+">
                 <br/>
                 <input type="button" value="删除" style="border: 0;width:60px;height:30px;display: block; background: rgb(12, 116, 214);color: #fff" >
                 <p>总金额：<span>22</span></p> -->

    </div>

    <script>
        let uid = localStorage.getItem("token");
        console.log(uid)
        let data = null;
        axios.get(getCartListApi, {
            params: {
                id: uid
            }
        }).then(res => {
            console.log(res)
            console.log(res.data.data)
            data = res.data.data;
            let html = "";
            res.data.data.forEach(p => {
                html += `
                <div id="box-list">
                <input class="ocheack"  type="checkbox">
                 <img src="${p.pimg}" alt="商品的图片"> 
                 <p><a href="index.html">${p.pname}</a></p>
                 <div> 
                    单价:<span>${p.pprice}</span>
                    </div>
                 <input date-id="${p.pid}" class="sub" type="button" value="-">
                <input date-id="${p.pid}" class="ipt num" type="text"  value="${p.pnum}">
                 <input date-id="${p.pid}"  class="next" type="button" value="+">
                 <br/>
                 <input class="delete" date-id="${p.pid}" type="button" value="删除" style="border: 0;width:60px;height:30px;display: block; background: rgb(12, 116, 214);color: #fff" >
                </div>
                 `
            })
            $("#box").html(html)
            /* 删除按钮 */
            let delBtn = document.querySelectorAll(".delete")
            //console.log(delBtn)
            cartDel(delBtn)
            function cartDel(cartDelBtn) {
                for (let i = 0; i < cartDelBtn.length; i++) {
                    cartDelBtn[i].onclick = function () {
                        // console.log(1);
                        let pid = this.getAttribute('date-id');
                        let params = { pid, uid };
                        // console.log(pid)
                        axios.get(cartdeletetListApi, { params }).then(res => {
                            console.log(res);
                            // 根据id删除数组中的商品
                            this.parentNode.remove();
                            data = data.filter(v => v.pid != pid);

                        })
                        cartCount()
                    }
                }
            }
            //全选和单选按钮
            let checkAllBtn = document.querySelector('#all-selete');
            console.log(checkAllBtn)
            let cboxBtn = document.querySelectorAll('.ocheack')
            console.log(cboxBtn)
            allSelBtn(checkAllBtn, cboxBtn)
            radioBtn(checkAllBtn, cboxBtn)
            function allSelBtn(allBtns, dBtn) {
                allBtns.onclick = function () {
                    // console.log(1)
                    for (let i = 0; i < dBtn.length; i++) {
                        if (this.checked) {
                            dBtn[i].checked = true;
                        } else {
                            dBtn[i].checked = false;
                        }
                    }
                    cartCount()
                }
            }
            /* 单选 */
            function radioBtn(allBtns, rBtn) {
                for (let i = 0; i < rBtn.length; i++) {
                    rBtn[i].onclick = function () {
                        // console.log(1)
                        // let arr = [...rBtn];
                        // let flag = arr.every(v => {
                        //     return v.checked == true;
                        // })
                        let flag = true;
                        for (let j = 0; j < rBtn.length; j++) {
                            if (rBtn[j].checked == false) {
                                flag = false;
                            }
                        }
                        if (flag == true) {
                            allBtns.checked = true;
                        } else {
                            allBtns.checked = false;
                        }
                        cartCount()
                    }
                }
            }
            /* 加减按钮 */
         //加
        let carSubBtn = document.querySelectorAll('.sub')
        let carAddBtn = document.querySelectorAll('.next');
        for (let i = 0; i < carAddBtn.length; i++) {
            carAddBtn[i].onclick = function () {
                // console.log(1)
                console.log(this)
                let pnumIpt = this.parentNode.querySelector('.num');
                pnumIpt.value = parseInt(pnumIpt.value) + 1;
                data[i].pnum = pnumIpt.value;//修改数组中的值
                let pid = this.getAttribute('date-id');
                console.log(pid)
                let pnum = pnumIpt.value;
                axios.get(unCartListApi, {
                    params: {
                        uid, pid, pnum
                    }
                }).then(res => {
                    console.log(res.data)
                })
                cartCount()
            }
        }
        //减
        for (let i = 0; i < carSubBtn.length; i++) {
            carSubBtn[i].onclick = function () {
                // console.log(1)
                let pnumIpt = this.parentNode.querySelector('.num');
                if (pnumIpt.value == 1) {
                    return;
                }
                pnumIpt.value = parseInt(pnumIpt.value) - 1;
                data[i].pnum = pnumIpt.value//修改数组中的值
                let pid = this.getAttribute('date-id');
                let pnum = pnumIpt.value;
                axios.get(unCartListApi, {
                    params: {
                        uid, pid, pnum
                    }
                }).then(res => {
                    console.log(res.data)
                })
                cartCount()
            }
        }
        function cartCount() {
            let countNum = 0;
            let countPrice = 0;
            let radioBtn = document.querySelectorAll('.ocheack');
            // console.log(radioBtn)
            for (let i = 0; i < radioBtn.length; i++) {
                // console.log(i)
                let radio = radioBtn[i];
                // console.log(radio.checked)
                if (radio.checked) {
                    console.log(i);
                    console.log(data[i])
                    let p = data[i];
                    countNum += parseInt(p.pnum);
                    countPrice += parseInt(p.pprice) * parseInt(p.pnum)
                }
            }
            console.log(countNum, countPrice)

            // let cartNumber = document.querySelector('#cart-acNum');
            let cartPrice = document.querySelector('.count-price');
            // cartNumber.innerHTML = countNum;
            cartPrice.innerHTML = countPrice;
        }
        })
    </script>
</body>

</html>